<template>
  <el-main class="basic-config">
    <el-form :model="form" label-width="auto" style="max-width: 600px">
      <div class="basic-box">
        <div class="basic-box-title">账户信息</div>
        <el-form-item label="登录账号">
          <el-input v-model="form.account" />
        </el-form-item>
        <el-form-item label="登录密码">
          <el-input type="password" v-model="form.password" />
        </el-form-item>
        <el-form-item label="手机号绑定">
          <el-input v-model="form.mobile" />
        </el-form-item>
        <el-form-item label="邮箱地址">
          <el-input v-model="form.email" />
        </el-form-item>
      </div>
      <div class="basic-box">
        <div class="basic-box-title">收款账号</div>
        <el-form-item label="法人姓名">
          <el-input v-model="form.legal_person_name" />
        </el-form-item>
        <el-form-item label="银行卡号">
          <el-input v-model="form.legal_person_bank_account" />
        </el-form-item>
        <el-form-item label="法人身份证">
          <el-input v-model="form.legal_person_id_card" />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="form.legal_person_phone" />
        </el-form-item>
      </div>
      <div class="basic-box">
        <div class="basic-box-title">支付信息</div>
        <el-form-item label="平台支付密码">
          <el-input v-model="form.platform_pay_password" />
        </el-form-item>
      </div>
    </el-form>
  </el-main>
  <el-footer class="sa-footer--submit">
    <el-button @click="resetForm">重置</el-button>
    <el-button type="primary" @click="keepForm">保存</el-button>
  </el-footer>
</template>

<script setup>
  import { reactive, onMounted } from 'vue';
  import { api } from '../info.service';
  import { cloneDeep } from 'lodash';
  import { ElMessage } from 'element-plus'

  const form = reactive({
    account: '',
    password: '123456',
    mobile: '',
    email: '',
    legal_person_name: '',
    legal_person_bank_account: '',
    legal_person_id_card: '',
    legal_person_phone: '',
    platform_pay_password: '',
  });

  onMounted(() => {
    getData();
  });

  const getData = async () => {
    const { error, data } = await api.basic.info();
    if (error === 0) {
      form.account = data.account;
      form.mobile = data.mobile;
      form.email = data.email;
      form.legal_person_name = data.legal_person_name;
      form.legal_person_bank_account = data.legal_person_bank_account;
      form.legal_person_id_card = data.legal_person_id_card;
      form.legal_person_phone = data.legal_person_phone;
      form.platform_pay_password = data.platform_pay_password;
    }
  };

  const resetForm = () => {
    getData()
  };

  const keepForm = async () => {
    let temp = cloneDeep(form);
    const { error, data } = await api.security.update(temp);

    if (error === 0) {
      ElMessage({
        message: '保存成功',
        type: 'success',
      })
    }
  };
</script>

<style lang="scss" scoped>

  .basic-box {
    .basic-box-title {
      width: max-content;
      position: relative;
      font-family: 'PingFangSC-Regular, sans-serif';
      font-size: 14px;
      color: #3D3D3D;
      z-index: 0;
      margin-bottom: 20px;
    }

    .basic-box-title::after {
      pointer-events: none;
      content: "";
      position: absolute;
      height: 8px;
      background: var(--t-bg-active);
      bottom: 0;
      right: 0;
      left: 0;
      z-index: -1;
    }

    .basic-box-item {
      padding-left: 40px;
      margin-top: 20px;
    }
  }
</style>
